<%@ page pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<%@include file="/header.jsp"%>
<link rel="stylesheet" href="${pageContext.request.contextPath}/plugs/zoom/css/ShopShow.css" type="text/css" />
<link rel="stylesheet" href="${pageContext.request.contextPath}/plugs/zoom/css/MagicZoom.css" type="text/css" />
<script src="${pageContext.request.contextPath}/plugs/zoom/js/MagicZoom.js" type="text/javascript"></script>
<script>
function btnSelect(contentid,typeid){
	$("."+typeid).removeClass("btn-info");
	$("#btn_"+contentid).addClass("btn-info");
}

function add(baseurl){
	var data=$('#fm_goods').serialize();
    $.post(baseurl+"/goods/addCart.action",data,function(result){

    	 if(result.success){
    		 //alert(result.cartnum);
    		 $("#cartBadge").html(result.cartnum);  		 
    		 $("#cartTitle").html("添加成功");  		 
    		 $("#cart_msg").html("已将商品加入到购物车。");  		 
    	 }else{ 		 
    		 $("#cartTitle").html("添加失败");
    		 $("#cart_msg").html("请重新选择商品。");
    	 }

    	 $("#cartModal").modal('show'); 
    	 $("#cart_msg").show();
    	 $("#cart_tab").hide();
    	 
    },"json");
}

</script>
</head>
<body>
	<div class="col-dm-12">
<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#" style="color"green>本店所有分类</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">首页<span class="sr-only">(current)</span></a></li>
        <li><a href="#">宅男活动专区</a></li>
       <li><a href="#">手办摄影区</a></li>
       <li><a href="#">萌妹专区</a></li>
       <li><a href="#">新品活动区</a></li>
       <li><a href="#">魔女YY区</a></li>
       <li><a href="#">幸运福袋</a></li>
       <li><a href="#">fate专区</a></li>
       <li><a href="#">海贼王专区</a></li>
      </ul>
      <form class="navbar-form navbar-left">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="贞德 黑贞 萌妹">
        </div>
        <button type="submit" class="btn btn-default">搜索</button>
      </form>
     
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>
</div>
	<!-- 主体内容 -->
	<div class="container">
		
		<!-- 商品显示行 -->
		<div class="row">
			<!-- 左侧图片和放大镜-->
			<div class="col-md-4">
				<div id="tsShopContainer">
					<div id="tsImgS">
						<a href="${pageContext.request.contextPath}/images/暗黑龙骑士手办.jpg"
							title="Images" class="MagicZoom" id="MagicZoom"><img
							width="350px" height="350px"
							src="${pageContext.request.contextPath}/images/暗黑龙骑士手办.jpg" /></a>
					</div>
					<div id="tsPicContainer">
						<div id="tsImgSArrL" onclick="tsScrollArrLeft()"></div>
						
						<div id="tsImgSArrR" onclick="tsScrollArrRight()"></div>
					</div>
					<img class="MagicZoomLoading" width="16" height="16"
						src="${pageContext.request.contextPath}/plugs/zoom/images/loading.gif"
						alt="Loading..." />
				</div>
				<script
					src="${pageContext.request.contextPath}/plugs/zoom/js/ShopShow.js"></script>
			</div>
			<!-- ending左侧图片和放大镜-->
			<!-- 右侧显示和表单 -->
				<div class="col-md-8">
			<h3 style="color:red">暗黑龙骑士手办</h3>
			<div class="panel panel-default">
			  <div class="panel-body bg_goodsdetail">
			    <p>促销价：<span class="price_red "><small>￥</small>356</span></p>
			    <p>原价：<span class="price"><small>￥</small>450</span></p>
			    <p>已售出 <span style="color:gray">1280+ </span>件</p>
			     <p style="color:red">优惠 <span style="color:green">20元店铺优惠券，满400可用</span></p>
			     <p style="color:red">优惠<span style="color:green">10元店铺优惠券，满300可用</span></p>
			  </div>
			</div>
	    <form id="fm_goods" class="form-inline" role="form"  method="post">	
				<input type="hidden" name="goodsId" value="${goodsDetail.goodsId}"/>
			    <input type="hidden" name="goodsName" value="${goodsDetail.goodsName}"/>
			    <input type="hidden" name="goodsPrice" value="${goodsDetail.goodsPrice}"/>
			    <input type="hidden" name="goodsDiscount" value="${goodsDetail.goodsDiscount}"/>
			    <input type="hidden" name="goodsPostalfee" value="${goodsDetail.goodsPostalfee}"/>		
			    <input type="hidden" name="contentid">
			    <input type="hidden" name="typeid">
			    <input type="hidden" name="contentid">
			<c:forEach items="${goodsDetail.typelist }" var="s" varStatus="vs">
			<div class="row row_style">
			  <div class="col-md-12">
	            <label>${s.typeName}：</label>
	                <input type="hidden" name="hid_${s.typeId}" id="hid_${s.typeId}" value=""/>
		            <div class="btn-group" role="group" id="btn_group_${s.typeId}">
					<c:forEach items="${s.detail}" var="t" varStatus="tvs">
						<button type="button" class="btn btn-default btn-xs ${tvs.first?'btn-info':'' } ${s.typeId}" id="btn_${t.contentId}"  onclick="btnSelect(${t.contentId},${s.typeId})">${t.content}</button>						
					</c:forEach>
					</div>
	          </div>  
            </div>
            </c:forEach>

             <div class="row row_style">
	             <div class="col-md-12">
	            	<div class="form-group">	
					    <label for="num">数量：</label>		 								
						<div class="input-group input-group-sm col-xs-4">
						<input class="form-control" id="goodsSales" name="goodsSales" type="number" value="1" min="1"/>
						
						</div>
						库存9999
					</div>
				  </div>	
             </div>
         </form>    
		     <div class="row row_style">
		        <div class="col-md-12">

			        <p class="p_height">快递：<small>0￥</small>${goodsDetail.goodsPostalfee}</p>			        
					<p>
						<button class="btn btn-primary btn-sm" type="submit">
							立即购买
						</button>
						<button class="btn btn-primary btn-sm" type="button" onclick="add('${pageContext.request.contextPath}')">
							加入购物车
						</button>
						
					</p>
				 </div>	
        
		     </div>
		</div>
			<!-- ending右侧显示和表单 -->
		</div>
		<!-- ending商品显示行 -->
				<div class="col-md-3">
		<div class="panel panel-default">
  <div class="panel panel-success">
    <h3 class="panel-title">官方自营</h3>
  </div>
  <div class="panel-body">
    <p>*2018年9月新上线</p><br>
    <p>*2018年8月上线</p><br>
    <p>*2018年7月上线</p><br>
    <p>*2018年6月上线</p><br>
    <p>*2018年5月上线</p><br>
    <p>*2018年4月上线</p><br>
    <p>*2018年3月上线</p><br>
    <p>*2018年2月上线</p1><br>
    <p>*2018年1月上线</p><br>
    <p>*日版代理预售</p><br>
     <p>*国产手办预定</p><br>
    <p>*宅男专区</p><br>
    <p>*萌妹专区</p><br>
    <p>*老司机专区</p><br>
    <p>*宅男福利专区</p><br>
    <p>*魔女YY区</p><br>
    <p>*fate专区</p><br>
    <p>*海贼王手办区</p><br>
    <p>*初音未来专区</p><br>
    <p>*火影忍者专区</p><br>
     <p>*舰娘专区</p><br>
    <p>*神奇宝贝专区</p><br>
    <p>*魔道祖师专区</p><br>
    <p>*奥特曼专区</p><br>
    <p>*狐妖小新娘专区</p><br>
    <p>*夏目友人帐专区</p><br>
    <p>*2017年12月专区</p><br>
    <p>*2017年11月专区</p><br>
    <p>*2017年10月专区</p><br>
    <p>*2017年9月专区</p><br>
     <p>*2017年8月专区</p><br>
    <p>*2017年7月专区</p><br>
    <p>*2017年6月专区</p><br>
    <p>*2017年5月专区</p><br>
    <p>*2017年4月专区</p><br>
    <p>*2017年3月专区</p><br>
    <p>*2017年2月专区</p><br>
    <p>*2017年1月专区</p><br>
    <p>*2016年12月专区</p><br>
     <p>*2016年11月专区</p><br>
      <p>*2016年10月专区</p><br>
        <p>*2016年9月专区</p><br>
          <p>*2016年8月专区</p><br>
            <p>*2016年7月专区</p><br>
              <p>*2016年6月专区</p><br>
                <p>*2016年5月专区</p><br>
                  <p>*2016年4月专区</p><br>
                    <p>*2016年3月专区</p><br>
                      <p>*2016年2月专区</p><br>
                        <p>*2016年1月专区</p><br>
  </div>
</div></div>
			<div class="col-md-9">
			<div class="panel panel-danger">
  <div class="panel-heading">
    <h3 class="panel-title">商品详情</h3>
  </div>
  <div class="panel-body">
  <img
		src="${pageContext.request.contextPath}/images/anhei1.jpg">
		<img
		src="${pageContext.request.contextPath}/images/anhei2.jpg">
		<img
		src="${pageContext.request.contextPath}/images/anhei3.jpg">
		<img
		src="${pageContext.request.contextPath}/images/anhei4.jpg">
		<img
		src="${pageContext.request.contextPath}/images/anhei5.jpg">
		<img
		src="${pageContext.request.contextPath}/images/anhei6.jpg">
		
  </div>
</div>	
 </div>
		<!-- ending商品详情行 -->
	</div>
	<!-- ending container -->
	
</body>
</html>